<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>jQuery Taconite Plugin</title>

<link rel="stylesheet" type="text/css" media="screen" href="../jq.css" />
<link rel="stylesheet" type="text/css" media="screen" href="taconite.css" />
<style>
.info { color: blue; }
.newContent { color:red; background-color: yellow; border: 1px solid gray; font-size: small; }
.green { color: green; }
ul { margin:0 }
#timer { margin-left: 15px; color: green }
div.step-one, div.step-two { height: auto }
</style>
<script src="jquery-latest.js"></script>
<script src="taconite.js"></script>

<script>
if (!window.console) {
    document.write('<scr'+'ipt type="text/javascript" src="../firebug/firebug.js"><\/scr'+'ipt>');
}

$(function() {
/*
    // examples of how to bind/handle taconite events

    $(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
    $(document).bind('taconite-begin-notify', function(event, xml) {
        $.blockUI('<h1>Taconite Processing</h1>');
        alert(event.type);
    });
    $(document).bind('taconite-complete-notify', function(event, xml, successful, err) {
        alert(event.type + '; successful: ' + successful + '; error: ' + err);
    });
*/

    // enable debug logging in Taconite Plugin
    $.taconite.debug = true;

    // initialize the tabs
   // $('#main').tabs({
   //     select: function(e, ui) {
  //          var href = $(ui.tab).attr('href');
   //         window.location.hash = href;
  //      }
  //  });
  //  $('#samples').tabs();

    // timestamp added to prevent browser caching (allows for easier testing)
    $('#ex-E').click(function() { $.get('files/extend.php?ts='+new Date().getTime()); });

    $('#ex1').click(function() { $.get('cda.php?ts='+new Date().getTime()); });
    $('#ex2').click(function() { $.ajax( { url: 'files/example2.xml?ts='+new Date().getTime() } ); });
    $('#ex3').click(function() { $.get('files/example3.xml?ts='+new Date().getTime()); });
    $('#ex4').click(function() { $.post('files/example4.php?ts='+new Date().getTime(), {}); });
    $('#ex5').click(function() { $.get('files/example5.xml?ts='+new Date().getTime()); });
    $('#ex6').click(function() { $.get('files/example6.xml?ts='+new Date().getTime()); });
    $('#ex7').click(function() { $.get('files/example7.txt?ts='+new Date().getTime(), function(data) {
        $.taconite(data);
    }); });
    $('#ex8').click(function() { $.get('files/example8.php?ts='+new Date().getTime(), function() {
        $('#timer').html('Time to process response document (ms): ' + $.taconite.lastTime);
    }); });

    // wire the 'Loading...' indicator
    $('<div id="busy">Loading...</div>')
        .ajaxStart(function() { $(this).show(); })
        .ajaxStop(function()  { $(this).hide(); })
        .appendTo('body');
});


// create the example plugin
$.fn.replaceAndFadeIn = function(newContentElements) {
    return this.each(function() {
        $(this).empty().hide().append(newContentElements).fadeIn('slow');
    });
};

</script>
</head>
<body><div><a href="http://jquery.com"><img src="../images/jq.png" class="logo" alt="Powered By jQuery" width="110" height="31" /></a></div>
<h1 id="banner"><a id="backnav" href="..">&lsaquo;&lsaquo; home</a>jQuery Taconite Plugin</h1>
<div id="main">
    <ul id="nav" class="anchors">
    <li><a href="#overview">Overview</a></li>
    <li><a href="#commands">Commands</a></li>
    <li><a href="#examples">Examples</a></li>
    <li><a href="#extend">Extending </a></li>
    <li><a href="#debugging">Debugging</a></li>
    <li><a href="#faq">FAQ</a></li>
    <li><a href="#download">Download</a></li>
    </ul>
    <div id="overview" class="tabContent">
        <h1>Overview</h1>
        The jQuery Taconite Plugin allows you to easily make multiple <abbr title="Document Object Model">DOM</abbr>
        updates using the results of a single <abbr title="Asynchronous JavaScript and XML">AJAX</abbr> call.

        It processes an <abbr title="eXstensible Markup Language">XML</abbr> command document that contain instructions for updating the DOM.
        <p />
        A command document looks like this:
        <pre><code class="mix">&lt;taconite&gt;
    &lt;append select="#status"&gt;
        Your order has shipped!
    &lt;/append&gt;
&lt;/taconite&gt;
</code></pre>
        <p />
        The document above instructs Taconite to append the message <em>Your order has shipped!</em>
        to the element with the id of <em>status</em>. When Taconite processes this document it will generate
        and execute the following code:
        <pre><code class="mix">$('#status').append('Your order has shipped');</code></pre>
        <p />
        And this is all initiated using any of the jQuery AJAX methods. For example:
        <pre><code class="mix">$.get('orderStatus.php');</code></pre>

    Look closely at the line above. There are no special arguments, options or functions needed to
    process the command document.
    The Taconite Plugin automatically detects and processes the server response for you.

    <p />
    That's the basic principle behind the Taconite Plugin - you make a server request, the server returns
    an XML command document, and the plugin processes the commands within that document. Simple!

    <h1>So What?</h1>

    So far we haven't seen evidence that the Taconite Plugin provides any capabilities beyond what jQuery can do very well
    on its own.  So why use it?  The power of Taconite is in its ability to process more than one element in
    the response document.  In fact the command document can have an unlimited number of commands.
    <p />
    Consider the following hypothetical:  A user submits an order for 1 dozen red roses and in response
    you would like to make the following page udpates:
    <ul>
        <li>Replace the "promotion" div with a "Thank you" message</li>
        <li>Remove the "emptyMsg" row from the shopping cart and remove any elements with the class "preOrder"</li>
        <li>Add a row to the shopping cart with the quantity, descption and amount of the order</li>
        <li>Update the "cartTotal" element with the new shopping cart total</li>
    </ul>
    <p />
    The following command document could effect all of these changes at once:
    <p />
    <pre><code class="xml">&lt;taconite&gt;
    &lt;replace select="#promotion"&gt;
        &lt;div&gt;Thank you for your order!&lt;/div&gt;
    &lt;/replace&gt;

    &lt;remove select="#emptyMsg, .preOrder" /&gt;

    &lt;append select="#cartTable tbody"&gt;
        &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;Dozen Red Roses&lt;/td&gt;&lt;td&gt;$18.99&lt;/td&gt;&lt;/tr&gt;
    &lt;/append&gt;

    &lt;replaceContent select="#cartTotal"&gt;
        $18.99
    &lt;/replaceContent&gt;
&lt;/taconite&gt;
</code></pre>



    <p style="clear:both" />

    <h1>More Benefits</h1>
    <strong>Write Content in Markup</strong>
    <p />
    In addition to being able to effect multiple DOM updates at once, the Taconite Plugin allows you to
    describe the updates in <abbr title="Extensible HyperText Markup Language">XHTML</abbr>.
    This means you can write content the way
    it was meant to be written - in markup!  For example, consider the case of querying the server
    for the next 10 rows of a dataset.  The query might look like this:
    <p />

    <pre><code class="mix">$.get('results.php?page=2');</code></pre>
    and the returned document might look like this:
    <p />
    <pre><code class="mix">&lt;taconite&gt;
    &lt;replaceContent select="#results tbody"&gt;
        &lt;!--
        This is all just regular markup.  Everything in here will replace
        the current contents of the tbody element in the #results table.
        --&gt;
        &lt;tr&gt;&lt;td&gt;Item 11 Name&lt;/td&gt;&lt;td&gt;Item 11 description&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Item 12 Name&lt;/td&gt;&lt;td&gt;Item 12 description&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Item 13 Name&lt;/td&gt;&lt;td&gt;Item 13 description&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Item 14 Name&lt;/td&gt;&lt;td&gt;Item 14 description&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Item 15 Name&lt;/td&gt;&lt;td&gt;Item 15 description&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Item 16 Name&lt;/td&gt;&lt;td&gt;Item 16 description&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Item 17 Name&lt;/td&gt;&lt;td&gt;Item 17 description&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Item 18 Name&lt;/td&gt;&lt;td&gt;Item 18 description&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Item 19 Name&lt;/td&gt;&lt;td&gt;Item 19 description&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Item 20 Name&lt;/td&gt;&lt;td&gt;Item 20 description&lt;/td&gt;&lt;/tr&gt;
    &lt;/replaceContent&gt;
&lt;/taconite&gt;
</code></pre>
    If you're already using a templating language on the server it will be <em>very</em> easy to get
    going with Taconite.  All that is required is to return a command document with valid XHTML
    content. You do not need to write any code to process the response on the client!
    <p />
    <strong>No innerHTML</strong>
    <p />
    The Taconite Plugin does not use the <code class="inline">innerHTML</code> DOM property
    to update elements.  This means you are free to update the contents of <em>any</em> element -
    including tables!


    <h1>Why not JSON?</h1>
    Why indeed! <abbr title="JavaScript Object Notation">JSON</abbr> is a great data exchange format. But
    it's not the best solution for every problem.  I've found that JSON is not ideal for working with complex
    data structures.  It can work, but it requires careful coding on both the client and server tiers.  In
    comparison, the Taconite model only requires that the server return valid XHTML. There is no
    coding required on the client at all!


    </div> <!-- #overview -->

    <div id="commands" class="tabContent">
        <h1>Taconite Commands</h1>
        The list of commands available to Taconite essentially maps directly to the jQuery API.  "commands" are the names of
        jQuery methods and these are broken out into 2 distinct categories based on the type of arguments that
        the method expects.
        <p />
        <dl id="api">
        <dt>Element Commands</dt>
        <dd>Commands that fall into this category are jQuery methods to which you pass DOM elements.
        For example, <code class="inline">append</code>, <code class="inline">prepend</code>,
        <code class="inline">before</code>, <code class="inline">after</code>,
        <code class="inline">wrap</code>, etc.  Taconite processes <em>element</em> commands by
        passing the entire contents of the command node to the specified jQuery method (as an array
        of DOM elements).  The <code class="inline">select</code> attribute identifieds the
        target of the operation and can be any valid jQuery selector.
        <p />In the example below, the entire contents of the "append" command element will be appended
        to the DOM element with the id of "main".  This includes the text node, the div, and the
        paragraph.
        <pre><code class="xml">&lt;taconite&gt;
    &lt;append select="#main"&gt;
        This text will be appended to the element with the id of main.
        &lt;div&gt;So will this!&lt;/div&gt;
        &lt;p&gt;Me too!&lt;/p&gt;
    &lt;/append&gt;
&lt;/taconite&gt;</code></pre>
        As a convenience, the Taconite Plugin provides two additional methods in this category that
        are not found on the jQuery API.  They are <code class="inline">replace</code>
        and <code class="inline">replaceContent</code>.
        </dd>
        <dt>Non-Element Commands</dt>
        <dd>Commands that fall into this category are jQuery methods to which you pass string arguments
        (or no arguments). For example, <code class="inline">addClass</code>, <code class="inline">removeClass</code>,
        <code class="inline">attr</code>, <code class="inline">css</code>, <code class="inline">hide</code>, etc.
        Taconite invokes these commands using attributes on the command element as the arguments to the command.
        The <code class="inline">name</code> and <code class="inline">value</code> attributes
        identify the arguments to pass.
        As of Taconite version 2.0.9, attributes can be named sequentially using <em>argX</em> notation,
        <code class="inline">arg1</code>, <code class="inline">arg2</code>, <code class="inline">arg3</code>, etc.
        The following example shows how to write commands for jQuery methods that take zero or more
        arguements.
        <p />
        <pre><code class="xml">&lt;taconite&gt;
    &lt;!-- no-arg commands --&gt;
    &lt;remove select="#advertisement" /&gt;
    &lt;hide select="#hideMe" /&gt;

    &lt;!-- one-arg command --&gt;
    &lt;addClass select="#changeMe" arg1="special" /&gt;
    &lt;addClass select="#changeMe" value="special" /&gt;

    &lt;!-- two-arg command --&gt;
    &lt;attr select="#updateMe" arg1="title" arg2="My Title" /&gt;
    &lt;attr select="#updateMe" name="title" value="My Title" /&gt;
&lt;/taconite&gt;</code></pre>
        </dd>
        <dt>One Special Command: <code>eval</code></dt>
        <dd>
        Finally, Taconite provides one special command for processing JavaScript.  Within the <em>eval</em>
        command you can place any valid JavaScript and it will be evaluated in the global context.
        <p />Example:
        <pre><code class="xml">&lt;taconite&gt;
    &lt;eval&gt;
        $('#myTarget').html("This text came from an eval command!");
    &lt;/eval&gt;
&lt;/taconite&gt;</code></pre>
        Note: The JavaScript should be inside a CDATA block if it contains special characters like
        <code class="inline">&lt;</code> or <code class="inline">&amp;</code>.
        <pre><code class="xml">&lt;taconite&gt;
    &lt;eval&gt;
        &lt;![CDATA[
            $('#statusBar').html("&lt;strong&gt;An error has occurred!&lt;/strong&gt;");
        ]]&gt;
    &lt;/eval&gt;
&lt;/taconite&gt;</code></pre>
        </dd>
        </dl>
    </div>

    <div id="examples" class="tabContent">
        <h1>Examples</h1>

        <div id="samples">
            <ul class="sampleAnchors">
                <li><a href="#sample1">Structure</a></li>
                <li><a href="#sample2">Tables</a></li>
                <li><a href="#sample3">Styling</a></li>
                <li><a href="#sample4">Effects</a></li>
                <li><a href="#sample5">Eval</a></li>
                <li><a href="#sample6">Demo 1</a></li>
                <li><a href="#sample7">Demo 2</a></li>
                <li><a href="#sample8">Performance</a></li>
            </ul>
            <div id="sample1" class="sampleTabContent">
                <h1>Structure</h1>
                This example shows how you can easily manipulate the structure of the DOM. The
                markup is as follows:
                <p />
                <pre><code class="mix">&lt;div id="example1" style="background-color: #ffa; padding:10px; border:1px solid #ccc"&gt;
    This is the &lt;span style="color:#800"&gt;structure example&lt;/span&gt; div.
&lt;/div&gt;</code></pre>
                <p />
                The following code is used to request <em>example1.php</em>:
                <pre><code class="mix">$.get('example1.php');</code></pre>
                <p />
                <em>example1.php</em> looks like this:
                <pre><code class="mix">&lt;?php header('Content-type: text/xml'); ?&gt;
&lt;taconite&gt;
    &lt;after select="#example1">
        This text will go AFTER the example div.
    &lt;/after&gt;

    &lt;before select="#example1">
        &lt;div&gt;This div will go BEFORE the example div.&lt;/div&gt;
    &lt;/before&gt;

    &lt;wrap select="#example1 span">
        &lt;span style="border: 1px dashed #00F"&gt;&lt;/span&gt;
    &lt;/wrap&gt;

    &lt;append select="#example1">
        &lt;div&gt;This div is APPENDED&lt;/div&gt;
    &lt;/append&gt;
&lt;/taconite&gt;</code></pre>


                <input id="ex1" type="button" value="Run Example 1" />
                <p />
                <hr />
                <p />
                <div id="example1" style="background-color: #ffa; padding:10px; border:1px solid #ccc">
                    This is the <span style="color:#800">structure example</span> div.
                </div>
            </div>

            <div id="sample2" class="sampleTabContent">
                <h1>Tables</h1>

                This example shows how easy it is to manipulate a table with Taconite. The
                markup is as follows:
                <p />
                <pre><code class="mix">&lt;table id="example2" style="background-color: #ffa; padding:10px; border:1px solid #ccc"&gt;
    &lt;thead&gt;
        &lt;tr&gt;&lt;td&gt;one&lt;/td&gt;&lt;td&gt;two&lt;/td&gt;&lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;&lt;td&gt;A&lt;/td&gt;&lt;td&gt;B&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;C&lt;/td&gt;&lt;td&gt;D&lt;/td&gt;&lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;</code></pre>
                <p />
                The following code is used to request <em>example2.xml</em>:
                <pre><code class="mix">$.ajax( { url: 'example2.xml' } );</code></pre>
                <p />
                <em>example2.xml</em> looks like this:
                <pre><code class="mix">&lt;taconite&gt;
    &lt;append select="#example2"&gt;
        &lt;tfoot&gt;
            &lt;tr&gt;&lt;td&gt;Foot-1&lt;/td&gt;&lt;td&gt;Foot-2&lt;/td&gt;&lt;/tr&gt;
        &lt;/tfoot&gt;
    &lt;/append&gt;

    &lt;replace select="#example2 thead"&gt;
        &lt;thead&gt;
            &lt;tr&gt;&lt;td&gt;Head-1&lt;/td&gt;&lt;td&gt;Head-2&lt;/td&gt;&lt;/tr&gt;
        &lt;/thead&gt;
    &lt;/replace&gt;

    &lt;prepend select="#example2 tbody"&gt;
        &lt;tr&gt;&lt;td&gt;Body-First&lt;/td&gt;&lt;td&gt;Body-First&lt;/td&gt;&lt;/tr&gt;
    &lt;/prepend&gt;

    &lt;before select="#example2 tfoot"&gt;
        &lt;tr&gt;&lt;td&gt;Body-Last&lt;/td&gt;&lt;td&gt;body-Last&lt;/td&gt;&lt;/tr&gt;
    &lt;/before&gt;

    &lt;append select="#example2 tbody"&gt;
        &lt;tr&gt;&lt;td colspan="2" align="center"&gt;spanned column&lt;/td&gt;&lt;/tr&gt;
    &lt;/append&gt;
	
&lt;/taconite&gt;</code></pre>


                <input id="ex2" type="button" value="Run Example 2" />
                <p />
                <hr />
                <p />
                <table id="example2" style="background-color: #ffa; padding:10px; border:1px solid #ccc">
                    <thead>
                        <tr><td>one</td><td>two</td></tr>
                    </thead>
                    <tbody>
                        <tr><td>A</td><td>B</td></tr>
                        <tr><td>C</td><td>D</td></tr>
                    </tbody>
                </table>
            </div>

            <div id="sample3" class="sampleTabContent">
                <h1>Styling</h1>

                This example shows how you can use Taconite to change the presentation of the markup.
                The markup is as follows:
                <p />
                <pre><code class="mix">&lt;div id="example3" style="background-color: #ffa; padding:10px; border:1px solid #ccc"&gt;
    &lt;div&gt;div one&lt;/div&gt;
    &lt;div&gt;&lt;span&gt;div two&lt;/span&gt;&lt;/div&gt;
    &lt;div&gt;div three&lt;/div&gt;
&lt;/div&gt;</code></pre>
                <p />
                The following code is used to request <em>example3.xml</em>:
                <pre><code class="mix">$.get('example3.xml');</code></pre>
                <p />
                <em>example3.xml</em> looks like this:
                <pre><code class="mix">&lt;taconite&gt;
    &lt;css select="#example3" name="backgroundColor" value="#80ff80" /&gt;

    &lt;!-- the "special" class defines a foreground color of red and font-size of 150% --&gt;
    &lt;addClass select="#example3 div span" value="special" /&gt;
&lt;/taconite&gt;</code></pre>


                <input id="ex3" type="button" value="Run Example 3" />
                <p />
                <hr />
                <p />
                <div id="example3" style="background-color: #ffa; padding:10px; border:1px solid #ccc">
                    <div>div one</div>
                    <div><span>div two</span></div>
                    <div>div three</div>
                </div>

            </div>

            <div id="sample4" class="sampleTabContent">
                <h1>Effects</h1>

                This example shows how you can use jQuery effects with Taconite.
                The markup is as follows:
                <p />
                <pre><code class="xml">&lt;div id="example4" style="display:none; background-color: #ffa; padding:10px; border:1px solid #ccc"&gt;
    Initially this div is hidden.
&lt;/div&gt;</code></pre>
                <p />
                The following code is used to request <em>example4.php</em>:
                <pre><code class="mix">$.post('example4.php', {});</code></pre>
                <p />
                <em>example4.php</em> looks like this:
                <pre><code class="mix">&lt;?php header('Content-type: text/xml'); ?&gt;
&lt;taconite&gt;
    &lt;replaceContent select="#example4"&gt;
        &lt;pre&gt;
        lorem ipsum dolor sit amet
        consectetuer adipiscing elit
        &lt;/pre&gt;
    &lt;/replaceContent&gt;

    &lt;slideDown select="#example4" value="100" /&gt;

&lt;/taconite&gt;</code></pre>


                <input id="ex4" type="button" value="Run Example 4" />
                <p />
                <hr />
                <p />
                <div id="example4" style="display:none; background-color: #ffa; padding:10px; border:1px solid #ccc">
                    Initially this div is hidden.
                </div>
                <p />
            </div>

            <div id="sample5" class="sampleTabContent">
                <h1>Eval</h1>

                This example shows how you can return JavaScript in your command document.
                The markup is as follows:
                <p />
                <pre><code class="xml">&lt;div id="example5" style="background-color: #ffa; padding:10px; border:1px solid #ccc"&gt;
    Initial content.
&lt;/div&gt;</code></pre>
                <p />
                The following code is used to request <em>example5.xml</em>:
                <pre><code class="mix">$.get('example5.xml');</code></pre>
                <p />
                <em>example5.xml</em> looks like this:
                <pre><code class="mix">&lt;taconite&gt;
    &lt;eval&gt;&lt;![CDATA[
        $('#example5').html("&lt;strong&gt;This is new content!&lt;/strong&gt;");
        alert("Content udpated.");
    ]]&gt;
    &lt;/eval&gt;
&lt;/taconite&gt;</code></pre>


                <input id="ex5" type="button" value="Run Example 5" />
                <p />
                <hr />
                <p />
                <div id="example5" style="background-color: #ffa; padding:10px; border:1px solid #ccc">
                    Initial content.
                </div>

            </div>

            <div id="sample6" class="sampleTabContent">

                <h1>Demo 1</h1>
                This page demonstrates many updates at once.
                <p />
                <input id="ex6" type="button" value="Run Example 6" />
                <hr />
                <table border="1" cellpadding="10">
                    <tr><th>Test</th><th>Description</th><th>Target</th></tr>
                    <tr>
                        <td><code>remove</code></td>
                        <td><div>Content to the right will be removed</div></td>
                        <td><div class="deleteDiv">This div will be removed</div>
                            <div class="deleteDiv">This one too</div>
                        </td>
                    </tr>
                    <tr>
                        <td><code>append</code></td>
                        <td><div>Content to the right will be appended to</div></td>
                        <td><div id="appendDiv">This is the APPEND div</div></td>
                    </tr>
                    <tr>
                        <td><code>prepend</code></td>
                        <td><div>Content to the right will be prepended to</div></td>
                        <td><div id="prependDiv">This is the PREPEND div</div></td>
                    </tr>
                    <tr>
                        <td><code>after</code></td>
                        <td><div>Content to the right will have new contents placed after it</div></td>
                        <td><div id="afterDiv">This is the AFTER div</div></td>
                    </tr>
                    <tr>
                        <td><code>before</code></td>
                        <td><div>Content to the right will have new contents placed before it</div></td>
                        <td><div id="beforeDiv">This is the BEFORE div</div></td>
                    </tr>
                    <tr>
                        <td><code>replace</code></td>
                        <td><div>Content to the right will be completely replaced
                            (note that the target div has a solid green border)</div></td>
                        <td><div id="replaceDiv" style="border: 2px solid green">This is the REPLACE div</div></td>
                    </tr>
                    <tr>
                        <td><code>replaceContent</code></td>
                        <td><div>Content to the right will have its contents replaced
                            (note that the target div has a solid green border)</div></td>
                        <td><div id="replaceContentsDiv" style="border: 2px solid green">This is the REPLACE-CONTENTS div
                            (<span>contents</span>
                            <span>contents</span>
                            <span>contents</span>)
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td><code>attr</code></td>
                        <td><div>Content to the right will have its 'class' attribute changed</div></td>
                        <td><div id="setAttrDiv">This text should turn green</div></td>
                    </tr>

                    <tr>
                        <td>Table Row insertion</td>
                        <td><div>Table to the right will have a new row inserted between rows one and two</div></td>
                        <td>
                            <table border="1" cellpadding="3">
                            <tr id="tr"><td>one</td><td>one</td><td>one</td></tr>
                            <tr><td>two</td><td>two</td><td>two</td></tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td><code>wrap</code></td>
                        <td><div>Text to the right should be wrapped in two bordered divs</div></td>
                        <td><div class="wrapMe">Wrap me in bordered divs</div></td>
                    </tr>
                    <tr>
                        <td><code>&lt;script&gt;</code></td>
                        <td>
                            <div>The button to the right will get a click handler via a dynamically added script element</div>
                        </td>
                        <td><input type="button" value="This button has no click handler (yet)" id="wireMe" /></td>
                    </tr>
                    <tr>
                        <td><code>hide</code></td>
                        <td><div>Content to the right will be hidden</div></td>
                        <td><div id="hideMe">HIDE ME</div></td>
                    </tr>
                    <tr>
                        <td><code>eval</code></td>
                        <td><div>Evaluating the contents of this command should insert text to the right </div></td>
                        <td><div id="evalTarget"></div></td>
                    </tr>
                </table>

            </div>

            <div id="sample7" class="sampleTabContent">

                <h1>Demo 2 - Strings Instead of Documents</h1>
                Demo 2 is exactly the same as Demo 1, with one key difference: Demo 2 processes an XML <em><strong>String</strong></em>
                returned from the server instead of an XML <em><strong>Document</strong></em>.  Processing
                XML strings can not be done using Taconite's auto-detection logic.  To process an XML string
                response from the server you must invoke the <code class="inline">taconite</code> method
                manually and pass it the string.
                <p />
                <em>NOTE: The preferred way of using Taconite is with XML Documents! However, if you are unable to
                use XML mime types for some reason, well-formed XML in string format is supported.</em>
                <p />
                The following code is used to request and process <em>example7.txt</em>:
                <p />
                <pre><code class="mix">$.get('example7.txt', function(responseText) {
    // call Taconite manually, passing it the server response
    $.taconite(responseText);
});</code></pre>
                <p />
                <input id="ex7" type="button" value="Run Example 7" />
                <hr />
                <table border="1" cellpadding="10">
                    <tr><th>Test</th><th>Description</th><th>Target</th></tr>
                    <tr>
                        <td><code>remove</code></td>
                        <td><div>Content to the right will be removed</div></td>
                        <td><div class="deleteDiv2">This div will be removed</div>
                            <div class="deleteDiv2">This one too</div>
                        </td>
                    </tr>
                    <tr>
                        <td><code>append</code></td>
                        <td><div>Content to the right will be appended to</div></td>
                        <td><div id="appendDiv2">This is the APPEND div</div></td>
                    </tr>
                    <tr>
                        <td><code>prepend</code></td>
                        <td><div>Content to the right will be prepended to</div></td>
                        <td><div id="prependDiv2">This is the PREPEND div</div></td>
                    </tr>
                    <tr>
                        <td><code>after</code></td>
                        <td><div>Content to the right will have new contents placed after it</div></td>
                        <td><div id="afterDiv2">This is the AFTER div</div></td>
                    </tr>
                    <tr>
                        <td><code>before</code></td>
                        <td><div>Content to the right will have new contents placed before it</div></td>
                        <td><div id="beforeDiv2">This is the BEFORE div</div></td>
                    </tr>
                    <tr>
                        <td><code>replace</code></td>
                        <td><div>Content to the right will be completely replaced
                            (note that the target div has a solid green border)</div></td>
                        <td><div id="replaceDiv2" style="border: 2px solid green">This is the REPLACE div</div></td>
                    </tr>
                    <tr>
                        <td><code>replaceContent</code></td>
                        <td><div>Content to the right will have its contents replaced
                            (note that the target div has a solid green border)</div></td>
                        <td><div id="replaceContentsDiv2" style="border: 2px solid green">This is the REPLACE-CONTENTS div
                            (<span>contents</span>
                            <span>contents</span>
                            <span>contents</span>)
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td><code>attr</code></td>
                        <td><div>Content to the right will have its 'class' attribute changed</div></td>
                        <td><div id="setAttrDiv2">This text should turn green</div></td>
                    </tr>

                    <tr>
                        <td>Table Row insertion</td>
                        <td><div>Table to the right will have a new row inserted between rows one and two</div></td>
                        <td>
                            <table border="1" cellpadding="3">
                            <tr id="tr2"><td>one</td><td>one</td><td>one</td></tr>
                            <tr><td>two</td><td>two</td><td>two</td></tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td><code>wrap</code></td>
                        <td><div>Text to the right should be wrapped in two bordered divs</div></td>
                        <td><div class="wrapMe2">Wrap me in bordered divs</div></td>
                    </tr>
                    <tr>
                        <td><code>&lt;script&gt;</code></td>
                        <td>
                            <div>The button to the right will get a click handler via a dynamically added script element</div>
                        </td>
                        <td><input type="button" value="This button has no click handler (yet)" id="wireMe2" /></td>
                    </tr>
                    <tr>
                        <td><code>hide</code></td>
                        <td><div>Content to the right will be hidden</div></td>
                        <td><div id="hideMe2">HIDE ME</div></td>
                    </tr>
                    <tr>
                        <td><code>eval</code></td>
                        <td><div>Evaluating the contents of this command should insert text to the right </div></td>
                        <td><div id="evalTarget2"></div></td>
                    </tr>
                </table>

            </div>


            <div id="sample8" class="sampleTabContent">
                <h1>Performance Test</h1>

                This example loads a 10 column, 500 row table into the space below.  Processing this table
                will result in the creation of over 5500 new elements.
                <p />
                <input id="ex8" type="button" value="Run Example 8" /> <span id="timer"></span>
                <p />
                <hr />
                <p />
                <div id="example8" style="background-color: #ffa; padding:10px; border:1px solid #ccc">
                    Table will be loaded here.
                </div>

            </div>

        </div>
    </div>


    <div id="extend" class="tabContent">
        <h1>Extending Taconite</h1>
        Extending the Taconite Plugin is a fairly simple exercise.  By design, Taconite can call any
        jQuery plugin so extending its capabilities is simply a matter of writing a new plugin.  In
        fact, Taconite uses this architecture to provide <code class="inline">replace</code> and
        <code class="inline">replaceContent</code> commands which are not found on the jQuery API.
        <p />
        <div class="step-one">First, create a jQuery plugin.  For details on writing jQuery
            plugins, consult the <a href="http://docs.jquery.com/Plugins/Authoring" class="external">Plugin Authoring Guide</a>.
        <p />
            Here we'll create a simple plugin that replaces the content of an element and slowly fades in
            the new content.
        <p />
        <pre><code class="mix">$.fn.replaceAndFadeIn = function(newContentElements) {
    return this.each(function() {
        // for each matching element, remove the current contents, hide the element,
        // append the new contents and then fadeIn the element
        $(this).empty().hide().append(newContentElements).fadeIn('slow');
    });
};</code></pre>

        </div>

        <p />
        <div class="step-two">You can now use your plugin as a Taconite command!
        <p />
        <pre><code class="xml">&lt;taconite&gt;
    &lt;replaceAndFadeIn select="#extendExample">
        &lt;h2&gt;This is new content added by the &lt;em&gt;replaceAndFadeIn&lt;/em&gt; plugin!&lt;/h2&gt;
    &lt;/replaceAndFadeIn&gt;
&lt;taconite/&gt;</code></pre>
        </div>
        <h1>Try It</h1>
        <div id="extendExample">Test out this new plugin.  Click the button below to replace the content in this
            div.  The new contents will be faded in slowly.
        </div>
        <p />
        <input type="button" id="ex-E" value="replaceAndFadeIn" />
    </div>

    <div id="debugging" class="tabContent">
        <h1>Debugging Taconite</h1>
        <dl>
        <dt>Serving XML</dt>
        <dd>
        The most important thing to remember when working with Taconite is that the server response <em>must</em>
        have an XML content-type.  This is critical for
        the browser to interpret the response as XML data.  You control the content-type of the response
        using response headers. The following code shows how to set the response headers for a few server-side languages.
        <p />
        PHP:
        <pre><code class="php">&lt;?php header('Content-type: text/xml'); ?&gt;</code></pre>
        JSP:
        <pre><code class="xml">&lt;%@page contentType="text/xml"%&gt;</code></pre>
        CF:
        <pre><code class="xml">&lt;cfheader name="Content-Type" value="text/xml"&gt;</code></pre>
        ASP:
        <pre><code class="xml">&lt;%response.ContentType="text/xml"%&gt;</code></pre>
        eXist:
        <pre><code class="xml">declare option exist:serialize "media-type=text/xml";</code></pre>
        <p />
        </dd>
        <dt>Well-Formed XML</dt>
        <dd>
        Even if you set the response header's content-type to XML, the browser's
        XMLHttpRequest object will not be able to build an XML document if the XML is not
        <a href="http://www.w3.org/TR/REC-xml/#sec-well-formed" class="external">well-formed</a>.
        This is why XHTML is required and why using self-closing HTML tags is not allowed.  If you're not
        used to writing XHTML markup, just keep a few things in mind:
            <p />
            <ul>
                <li>Do not use self-closing tags.  For example:
                    <ul>
                        <li>Instead of <code class="inline">&lt;p&gt;</code>, use <code class="inline">&lt;p&gt; ... &lt;/p&gt;</code>, or <code class="inline">&lt;p /&gt;</code></li>
                        <li>Instead of <code class="inline">&lt;br&gt;</code>, use <code class="inline">&lt;br /&gt;</code></li>
                        <li>Instead of <code class="inline">&lt;hr&gt;</code>, use <code class="inline">&lt;hr /&gt;</code></li>
                    </ul>
                </li>
                <li>Use character entities for special characters in text.  For example:
                    <ul>
                        <li>Instead of <code class="inline">&amp;</code>, use <code class="inline">&amp;amp;</code></li>
                        <li>Instead of <code class="inline">&lt;</code>, use <code class="inline">&amp;lt;</code></li>
                        <li>Instead of <code class="inline">&gt;</code>, use <code class="inline">&amp;gt;</code></li>
                    </ul>
                </li>
                <li>Enclose content that needs to use special characters in a CDATA block.  For example:
                    <pre><code class="mix">&lt;![CDATA[
    // on the following line the "less than" character is needed
    for (var i=0; i &lt; max; i++) {
        // do something interesting
    }
]]&gt;</code></pre>
                </li>
            </ul>
        <p />
        </dd>

        <dt>Debug Logging</dt>
        <dd>
            To assist in debugging the Taconite Plugin provides debug logging capabilities that can be
            enabled on-demand.  When Taconite's debug logging is enabled it will write output
            to the <a href="http://getfirebug.com" class="external">Firebug</a> console.
            <p />
            Debug logging is enabled by setting <code class="inline">$.taconite.debug</code> to true.  For example:
            <p />
            <pre><code class="mix">&lt;script type="text/javascript">
    $.taconite.debug = true;
&lt;/script&gt;</code></pre>

            I highly recommend enabling debug logging during development.  The image below shows the type of
            data that is logged to Firebug.
            <p />
            <img src="log.gif" alt="Taconite Log Output" width="682" height="385" />
        </dd>
        </dl>

    </div>

    <div id="faq" class="tabContent">
        <h1>Frequently Asked Questions</h1>
        <dl>
        <dt>Where did the Taconite Plugin idea come from?</dt>
        <dd>The idea came from the <a href="http://taconite.sourceforge.net/" class="external">Taconite Framework</a>
            which was written by Ryan Asleson and Nathaniel T. Schutta.  The Taconite Plugin is
            essentially a port of that project's parser functionality.  Additionally, several ideas
            were contributed by <a href="http://www.brainknot.com/" class="external">Kenton Simpson</a>.
        </dd>
        <dt>What versions of jQuery is the Taconite Plugin compatible with?</dt>
        <dd>The Taconite Plugin is compatible with jQuery v1.2.3 and later.</dd>
        <dt>Does the Taconite Plugin have any dependencies on other plugins?</dt>
        <dd>No.</dd>
        <dt>Can I use the Taconite Plugin with the Form Plugin?</dt>
        <dd>Absolutely!  The Taconite Plugin intercepts all server responses so it can be used with any code
            that invokes $.ajax, either directly or indirectly.</dd>
        <dt>Is the Taconite Plugin fast?</dt>
        <dd>Decide for yourself.  Run each of the examples on the <a href="./#examples">Examples</a> tab and guage the
            responsiveness.  The Performance example lets
            you run a stress test that triggers the addition of over 5500 DOM elements (a rather extreme scenario).
            </dd>
        <dt>Are the Taconite commands executed in sequence?</dt>
        <dd>Yes. If you have order-dependent commands you can count on them being executed
            in the order that they appear in the document.</dd>
        <dt>Can't I use Taconite with an XML string instead of an XML document?</dt>
        <dd>Yes, you can, but auto-detection of the command document is not supported for XML strings.
            See 'Demo 2' on the <a href="./#examples">Examples</a> page for more info.
        </dd>
        <dt>Is there a unit test suite for the Taconite Plugin?</dt>
        <dd>Yes!  <a href="test/">Run unit tests.</a>
        </dd>
		<dt>Are there any server-side libraries that work with Taconite?</dt>
		<dd>Yes!
			<ul>
				<li>PHP: Taco PHP Class by Donn Hill at <a href="http://findmeonthe.net/TACONITE/">http://findmeonthe.net/TACONITE/</a></li>
				<li>C#: sharptaconite by Goran Siska at <a href="http://code.google.com/p/sharptaconite/">http://code.google.com/p/sharptaconite/</a></li>
			</ul>
		</dd>
        </dl>
    </div>

    <div id="download" class="tabContent">
        <h1>Download</h1>
        The latest version of Taconite Plugin is available here: <a href="http://github.com/malsup/taconite/raw/master/jquery.taconite.js?v3.09">jquery.taconite.js</a>
		or from the plugin's <a class="external" href="http://github.com/malsup/taconite/tree/master">Github repository</a>
        <p />
        <div id="footer">
        The Taconite Plugin was written by Mike Alsup.  Send comments, questions or feedback to: taconite-at-malsup-dot-com.
        </div>
    </div>

</div> <!-- main -->


</body></html>
